<script>
  import { createEventDispatcher } from 'svelte';
  
  const dispatch = createEventDispatcher();
  
  export let values = [];
  export let placeholder = '';
  export let disabled = false;
  
  let inputValue = '';
  let inputRef;
  
  function addTag() {
    const trimmed = inputValue.trim();
    if (trimmed && !values.includes(trimmed)) {
      values = [...values, trimmed];
      inputValue = '';
      dispatch('change', values);
    }
  }
  
  function removeTag(index) {
    values = values.filter((_, i) => i !== index);
    dispatch('change', values);
  }
  
  function handleKeydown(event) {
    if (event.key === 'Enter') {
      event.preventDefault();
      addTag();
    } else if (event.key === 'Backspace' && inputValue === '' && values.length > 0) {
      removeTag(values.length - 1);
    }
  }
  
  function handlePaste(event) {
    event.preventDefault();
    const pastedText = event.clipboardData.getData('text');
    const newTags = pastedText.split(/[,，\s]+/).filter(tag => tag.trim());
    
    const uniqueNewTags = newTags.filter(tag => !values.includes(tag.trim()));
    if (uniqueNewTags.length > 0) {
      values = [...values, ...uniqueNewTags.map(tag => tag.trim())];
      dispatch('change', values);
    }
  }
</script>

<div class="tag-input" class:disabled>
  <div class="tag-container">
    {#each values as tag, index}
      <div class="tag">
        <span class="tag-text">{tag}</span>
        {#if !disabled}
          <button 
            class="tag-remove" 
            on:click={() => removeTag(index)}
            type="button"
          >×</button>
        {/if}
      </div>
    {/each}
    
    {#if !disabled}
      <input
        bind:this={inputRef}
        bind:value={inputValue}
        {placeholder}
        class="tag-input-field"
        on:keydown={handleKeydown}
        on:paste={handlePaste}
        on:blur={addTag}
      />
    {/if}
  </div>
  
  {#if values.length > 0}
    <div class="tag-preview">
      未找到用户 "{values.slice(-2).join('", "')}"
    </div>
  {/if}
</div>

<style>
  .tag-input {
    width: 100%;
  }
  
  .tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(255, 77, 79, 1);
    border-radius: 4px;
    background: #fff;
    min-height: 40px;
    align-items: flex-start;
    align-content: flex-start;
  }
  
  .disabled .tag-container {
    background: #f5f5f5;
    border-color: #e0e0e0;
  }
  
  .tag {
    display: flex;
    align-items: center;
    background: #f0f0f0;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    color: #333;
  }
  
  .tag-text {
    margin-right: 4px;
  }
  
  .tag-remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .tag-remove:hover {
    color: #ff4d4f;
  }
  
  .tag-input-field {
    border: none;
    outline: none;
    flex: 1;
    min-width: 100px;
    font-size: 13px;
    background: transparent;
  }
  
  .tag-preview {
    margin-top: 4px;
    font-size: 12px;
    color: #ff4d4f;
  }
</style>
